The Curious Case of Benjamin Button
To demonstrate the power and flexibility of a headless WordPress install, VIA Studio's design and development teams worked side by side to create an interactive reading experience. The Curious Case of Benjamin Button, a short story by F. Scott Fitzgerald, let us have some fun with illustrations and animation.
This site won a Gold Addy Award at AAF Louisville 2019
See the site: https://mysterymanofmaryland.com/
CREATING THE FRAMEWORK
WordPress is a powerful content management system, which is why we use it on a majority of our websites. However, using WordPress to serve up the front-end of a site can make it difficult to do things like page transitions and super-speedy navigation. Now that WordPress has a built in API, we aren’t as limited as we used to be. We decided to build the site as a single-page application with WordPress as a back-end and React.js as our front-end JavaScript framework. WordPress doesn’t render the pages itself, but instead serves up content via the new API through a mixture of standard and customized JSON REST endpoints.
MORPHING ANIMATION
Another large piece of the project was the reverse aging animation of Benjamin Button. This was accomplished by using the Green Sock JavaScript animation platform. Our design team created a series of SVG illustrations that represented the age of Benjamin in each chapter of the book. Every animated component (facial features, hat, etc) is in it’s own SVG path element; Green Sock allowed us to morph the shape of these paths to the corresponding path in the next illustration. Here’s a quick demo of how this works:
Once we had the content and framework, we created a library of custom illustrations to be used throughout the story. CSS keyframe animations give some movement to the homepage.
TELLING THE STORY
To stay true to the original, we decided to emulate the experience of reading a physical book. We used gradients, texture, and animation to communicate the old-school experience.
Benjamin ages backwards in the story, so we also incorporated a ‘backwards’ metaphor throughout, such as a backwards ticking clock in the chapter archive and the button hover states.
